<template>
  <div class="home">
    <div class="home-box">
      <div class="home-box-title">
        <div class="home-box-title-logo">
          <img src="../images/home-logo.png" alt />
        </div>
        <div class="home-box-title-text" @click="loginChange" v-if="loginShow">注册/登录</div>
        <div class="home-box-title-mine" @click="mineChange" v-else>
          <div class="home-box-title-mine-hint" @click.stop="mineLith">
            <img src="../images/msgHint.png" alt />
            <div
              class="home-box-title-mine-hint-num"
              v-if="msgTotal>0"
            >{{ msgTotal>9? "···":msgTotal }}</div>
          </div>
          <div class="home-box-title-mine-msg">
            <p>{{ nickname }}</p>
            <div class="home-box-title-mine-msg-img">
              <img :src="avatar" alt height="100%" />
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-inquire" @click="searchChange">
          <div class="center-inquire-left">
            <img src="../images/inquire-left.png" alt />
          </div>
          <div class="center-inquire-text">
            <p>数字人查询</p>
            <!-- <p>Digital person query</p> -->
          </div>
          <div class="center-inquire-right">
            <img src="../images/inquire-right.png" alt />
          </div>
        </div>
        <div class="center-file" @click="applyForChange">
          <p>备案/存证</p>
          <div class="center-file-img">
            <img src="../images/main-right.png" alt />
          </div>
        </div>
        <div class="center-main" @click="datumChange">
          <div class="center-main-left">
            <img src="../images/main-left.png" alt />
          </div>
          <div class="center-main-text">
            <p>数字人主页</p>
            <!-- <p>Digital man home</p> -->
          </div>
          <div class="center-main-right">
            <img src="../images/main-right.png" alt />
          </div>
        </div>
      </div>
      <!-- <div class="logo">
        <div>
          <img src="../images/logo_bottom.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo1.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo2.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo3.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo4.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo5.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo6.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo2.png" alt />
        </div>
        <div class="logo-item">
          <img src="../images/logo5.png" alt />
        </div>
      </div>-->
      <!-- <div class="logo">
        <div class="logo_p">
          <div>平台介绍</div>
          <div>案例展示</div>
          <div>战略伙伴</div>
          <div>新闻动态</div>
          <div class="last">联系我们</div>
        </div>
        <div class="logo_hr"></div>
        <div class="logo_p_2">
          <div @click="open_url('http://www.cac.gov.cn/')">中央网信办</div>
          <div  @click="open_url('http://www.people.com.cn/')">人民日报社</div>
          <div  @click="open_url('https://www.mps.gov.cn/')">公安部</div>
          <div  @click="open_url('https://www.miit.gov.cn/')">工业和信息化部</div>
          <div  @click="open_url('https://www.most.gov.cn/index.html')">国家科学技术部</div>
          <div  @click="open_url('https://www.mct.gov.cn/')">国家文化和旅游部</div>
          <div  @click="open_url('https://www.cnipa.gov.cn/')">国家知识产权局</div>
          <div  @click="open_url('http://www.cnipr.com/')">中国知识产权网</div>
          <div  @click="open_url('https://ggfw.cnipa.gov.cn/PatentCMS_Center/')">国家知识产权公共服务网</div>
          <div  @click="open_url('https://szr360.com/')">数字人专委会</div>
        </div>
        <div class="logo_p_3">
          中国数字人知识产权存证保护平台 China Digital Huamn Lintellectual Property Confirmation & Protection Platform 版权所有 Copyright ipph.cn All rights reserved.
        </div>
        <div class="logo_p_4">
          京ICP备19058648号©️ 汇文天下（北京）文化传媒有限公司 HW Universal（beijing）Cullure&Media Co.. Ltd
        </div>
      </div>-->
    </div>
    <!-- <div class="hint">
      <p>中国数字人知识产权存证保护平台</p>
    </div>-->
    <div class="logo">
      <!-- <div class="logo_p">
        <div @click="exhibition(0)" style="cursor: pointer;">平台介绍</div>
        <div @click="exhibition(1)" style="cursor: pointer;">案例展示</div>
        <div @click="exhibition(2)" style="cursor: pointer;">战略伙伴</div>
        <div @click="exhibition(3)" style="cursor: pointer;">新闻动态</div>
        <div @click="exhibition(4)" class="last" style="cursor: pointer;">联系我们</div>
      </div>-->
      <div class="logo_box">
        <div class="logo_box_item">
          <div
            class="logo_box_item_top"
            style="padding: 16px 21px; display: flex;justify-content: center;"
            @click="exhibition(1)"
          >
            <p class="logo_box_item_top_hint">了解更多</p>
            <img v-show="screenShow" :src="homeIndex.anliImg" alt height="100%" />
            <img v-show="!screenShow" :src="homeIndex.anliImg" alt height="100%" />
          </div>
          <div class="logo_box_item_down" @click="exhibition(1)">
            <p>案例展示 CASE PRESEMTATION</p>
          </div>
        </div>
        <div class="logo_box_item">
          <div class="logo_box_item_top" @click="exhibition('0')">
            <div class="wicket">
              <div class="wicket_title">平台简介</div>
              <div class="wicket_hint">了解更多</div>
            </div>
            <div class="wicket">
              <div class="wicket_text">&#12288;&#12288;{{ homeIndex.platformContent }}</div>
              <div class="wicket_img">
                <img :src=" homeIndex.platformImg" alt height="100%" />
              </div>
            </div>
          </div>
          <div class="logo_box_item_down" style="background-color: #7881BB;" @click="exhibition(4)">
            <p>联系我们 CONTACT US</p>
          </div>
        </div>
        <div class="logo_box_item">
          <div class="logo_box_item_top">
            <div class="wicket" @click="exhibition(3)">
              <div class="wicket_title">新闻动态</div>
              <div class="wicket_hint">了解更多</div>
            </div>
            <div class="wicket_box">
              <div
                class="wicket_news"
                v-for="(item,index) in homeIndex.articleList"
                :key="index"
                @click="exhibitions(3,item.id)"
              >
                <div class="wicket_news_img">
                  <img :src="item.cover" alt width="100%" />
                </div>
                <div class="wicket_news_time">
                  <!-- <p>2023年6月20日</p> -->
                  <p>{{item.title}}</p>
                </div>
                <div class="wicket_news_text">
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="logo_box_item_down" @click="exhibition(2)">
            <P>战略伙伴 STRATEGLC PARTNER</P>
          </div>
        </div>
      </div>
      <div class="logo_hr"></div>
      <div class="logo_p_2">
        <div
          v-for="(item,index) in com_links"
          :key="index"
          @click="open_url(item.url)"
        >{{item.title}}</div>
        <!-- <div @click="open_url('http://www.people.com.cn/')">人民日报社</div>
        <div @click="open_url('https://www.mps.gov.cn/')">公安部</div>
        <div @click="open_url('https://www.miit.gov.cn/')">工业和信息化部</div>
        <div @click="open_url('https://www.most.gov.cn/index.html')">国家科学技术部</div>
        <div @click="open_url('https://www.mct.gov.cn/')">国家文化和旅游部</div>
        <div @click="open_url('https://www.cnipa.gov.cn/')">国家知识产权局</div>
        <div @click="open_url('http://www.cnipr.com/')">中国知识产权网</div>
        <div @click="open_url('https://ggfw.cnipa.gov.cn/PatentCMS_Center/')">国家知识产权公共服务网</div>
        <div @click="open_url('https://szr360.com/')">数字人专委会</div>-->
      </div>
      <div class="logo_p_3">
        {{ com_foots.platform }}{{ com_foots.copyright }}
        <!-- 中国数字人知识产权存证保护平台 China Digital Huamn Lintellectual Property Confirmation & Protection Platform 版权所有 Copyright ipph.cn All rights reserved. -->
      </div>

      <div class="logo_p_4">
        <span
          style="cursor:pointer;"
          @click="open_url('https://beian.miit.gov.cn/#/Integrated/index')"
        >{{ com_foots.filing }}</span>
        {{ com_foots.company }}
        <!-- 京ICP备19058648号©️ 汇文天下（北京）文化传媒有限公司 HW Universal（beijing）Cullure&Media Co.. Ltd -->
      </div>
    </div>
  </div>
</template> 

<script>
import {
  maininfo,
  comment_total,
  com_link,
  com_foot,
  homeIndex
} from "@/utils/api";
export default {
  name: "homeView",
  data() {
    return {
      token: "",
      loginShow: true,
      avatar: "",
      nickname: "",
      msgTotal: "",
      com_links: [], //相关网站
      com_foots: {}, //网站底部信息
      homeIndex: {}, //案例数据
      screenWidth: null,
      screenShow: true
    };
  },

  mounted() {
    //获取屏幕尺寸
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      // console.log("高度");
      //屏幕尺寸变化
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },

  watch: {
    screenWidth: function(n) {
      console.log(n);
      if (n > 1800) {
        this.screenShow = false;
        console.log(n);
      } else {
        this.screenShow = true;
      }
    }
  },
  created() {
    // console.log("路由信息", this.$route);
    // 页面头部标题
    document.title = this.$route.meta.title;
    //获取留言条数
    if (localStorage.getItem("token")) {
      comment_total({}, res => {
        localStorage.setItem("msgTotal", res.data);
      });
    }

    this.token = localStorage.getItem("token");
    if (this.token) {
      this.loginShow = false;
      this.avatar = localStorage.getItem("avatar");
      this.nickname = localStorage.getItem("nickname");
      this.msgTotal = localStorage.getItem("msgTotal");
    }
    this.get_list();
    // maininfo({}, res => {
    //   console.log(res);
    // });
  },
  methods: {
    open_url(url) {
      // 用新窗口打开
      window.open(url, "_blank");
    },
    loginChange() {
      this.$router.push({ name: "login" });
    },
    searchChange() {
      this.$router.push({ name: "search" });
    },
    applyForChange() {
      if (this.token) {
        this.$router.push({ name: "applyFor" });
      } else {
        this.$message({
          message: "请登录",
          type: "error"
        });
        setTimeout(() => {
          this.loginChange();
        }, 1200);
      }
    },
    datumChange() {
      if (this.token) {
        this.$router.push({ name: "datum" });
      } else {
        this.$message({
          message: "请登录",
          type: "error"
        });
        setTimeout(() => {
          this.loginChange();
        }, 1200);
      }
    },
    mineChange() {
      this.$router.push({ name: "datum" });
    },
    mineLith() {
      this.$router.push({ name: "datum", params: { id: 2 } });
    },
    get_list() {
      com_link({}, res => {
        console.log(res);
        this.com_links = res.data; //相关网站
      });
      com_foot({}, res => {
        console.log(res);
        this.com_foots = res.data; //网站底部信息
      });
      homeIndex({}, res => {
        if (res.code === 200) {
          res.data.articleList.forEach((item, indx) => {
            console.log([...item.publishTime]);
            var val = "";
            var dat = [...item.publishTime];
            dat.forEach((item2, index) => {
              if (index == 4) {
                item2 = "年";
              }
              if (index == 5) {
                if (item2 == 0) {
                  item2 = "";
                }
              }
              if (index == 7) {
                item2 = "月";
              }
              if (index == 9) {
                item2 += "日";
              }
              val += item2;
            });
            res.data.articleList[indx].publishTime = val;
          });
          this.homeIndex = res.data; //案例展示
          console.log("案例展示", res);
        }
      });
    },
    // 底部跳转，平台介绍
    exhibition(val) {
      // console.log(val);
      this.$router.push({ name: "exhibition", params: { titleNum: val } });
    },
    // 新闻详情
    exhibitions(val, valId) {
      console.log(val, valId);
      this.$router.push({
        name: "exhibition",
        params: { titleNum: val, id: valId }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  &-box {
    width: 100% !important;
    // min-height: 90vh;
    margin: 0 auto;
    background: #fff;
    position: relative;
    &-title {
      max-width: 1920px;
      min-width: 1440px;
      margin: auto;
      width: 100%;
      height: 120px;
      display: flex;
      padding: 0 60px 0 50px;
      align-items: center;
      justify-content: space-between;
      &-logo {
        width: 31.5%;
        > img {
          width: 100%;
        }
      }
      &-text {
        width: 7%;
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(135deg, #3b7ad8, #10a3e4);
        box-shadow: 1px 1px 10px 0px rgba(12, 34, 65, 0.23);
        cursor: pointer;
      }

      &-mine {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        cursor: pointer;
        &-hint {
          // width: 24px;
          // height: 25px;
          position: relative;
          margin-right: 20px;

          > img {
            width: 21px;
            height: 23px;
          }
          &-num {
            position: absolute;
            width: 23px;
            height: 23px;
            background-color: red;
            border: 3px solid #ffffff;
            top: -8px;
            right: -13px;
            border-radius: 50%;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        &-msg {
          display: flex;
          align-items: center;
          font-size: 20px;
          font-weight: 500;
          color: #333333;

          &-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            margin-left: 20px;
            cursor: pointer;
            // margin-right: 60px;
            // outline: 2px solid red;
            overflow: hidden;
          }
        }
      }
    }
  }
}

.center {
  width: 100%;
  // height: 722px;
  height: 578px;
  background: url("../images/home-bg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &-inquire {
    width: 377px;
    // height: 130px;
    height: 104px;
    background: url("../images/inquire-bg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    &-left {
      width: 19px;
      height: 21px;
      margin-left: 53px;
      > img {
        width: 100%;
      }
    }
    &-text {
      text-align: right;
      margin-left: 19px;
      margin-right: 25px;
    }
    &-text > p:nth-child(1) {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
    &-text > p:nth-child(2) {
      font-size: 18px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.3);
    }
    &-right {
      width: 41px;
      height: 35px;
      > img {
        width: 100%;
      }
    }
  }
  &-file {
    width: 389px;
    height: 388px;
    width: 310px;
    height: 310px;
    background: url("../images/file-bg.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 210px;
    border-radius: 50%;
    cursor: pointer;
    > p {
      font-size: 36px;
      font-weight: bold;
      color: #fff;
    }
    &-img {
      width: 19px;
      height: 21px;
      overflow: hidden;
      margin-top: 10px;
      > img {
        width: 100%;
      }
    }
  }
  &-main {
    width: 377px;
    // height: 130px;
    height: 104px;
    background: url("../images/main-bg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    cursor: pointer;

    &-left {
      width: 36px;
      height: 36px;
      margin-left: 49px;
      > img {
        width: 100%;
      }
    }
    &-text {
      margin-left: 18px;
      margin-right: 18px;
    }
    &-text > p:nth-child(1) {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
    &-text > p:nth-child(2) {
      font-size: 18px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.3);
    }
    &-right {
      width: 19px;
      height: 21px;

      > img {
        width: 100%;
      }
    }
  }
}
.logo {
  width: 100%;
  padding-top: 31px;
  padding-bottom: 31px;
  background-color: #ffffff;
  // display: flex;
  // justify-content: center;
  .logo_p {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #333333;
    line-height: 30px;
    div {
      margin-right: 20px;
      margin-left: 20px;
      position: relative;
    }
    div:before {
      content: "";
      width: 1px;
      height: 16px;
      background: #dddddd;
      position: absolute;
      top: 7px;
      right: -20px;
    }
    div.last:before {
      display: none;
    }
  }
  .logo_hr {
    width: 100%;
    height: 1px;
    background: #dddddd;
    margin-top: 30px;
  }
  .logo_p_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #333333;
    line-height: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    div {
      margin-right: 20px;
      margin-left: 20px;
      position: relative;
      cursor: pointer;
    }
  }
  .logo_p_3 {
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    text-align: center;
  }
  .logo_p_4 {
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    text-align: center;
  }

  // &-item {
  //   width: 160px;
  //   height: 114px;
  //   border: 1px solid #dddddd;
  //   overflow: hidden;
  //   display: flex;
  //   align-items: center;
  //   margin-right: 17px;
  //   padding: 0 7px;
  //   > img {
  //     width: 100%;
  //   }
  // }
}
.hint {
  // max-width: 1920px;
  // min-width: 1440px;
  width: 100%;
  margin: 0 auto;
  height: 62px;
  background-color: #f8f8f8;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  text-align: center;
  line-height: 62px;
}
.right {
  width: 47.8%;
  display: flex;
  align-items: center;
  justify-content: end;
  &-hint {
    width: 2.8%;
    margin-right: 2.8%;
    position: relative;
    cursor: pointer;
    > img {
      width: 100%;
    }
    &-num {
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      position: absolute;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
      top: -4px;
      right: -11px;
      border: 3px solid #3c7dd8;
    }
  }

  > p {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  > img {
    width: 7.8%;
    cursor: pointer;
  }
}
.logo_box {
  min-width: 1440px;
  // height: 200px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
  // border: 1px solid red;
  &_item {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // outline: 1px solid red;
    overflow: hidden;
    &_top {
      width: 100%;
      height: 281px;
      border-radius: 20px;
      background-color: #f1f1f1;
      // outline: 1px solid red;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      &_hint {
        width: 100%;
        position: absolute;
        top: 29px;
        left: 0px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        text-align: center;
        text-align: center;
      }
    }
    &_down {
      width: 354px;
      height: 36px;
      margin-top: 20px;
      background-color: #959595;
      border-radius: 18px;
      text-align: center;
      line-height: 36px;
      font-weight: bold;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer;
    }
  }
  &_item:nth-child(3) {
    margin-right: 0px;
  }
}
.wicket {
  width: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  &_title {
    font-size: 26px;
    font-weight: bold;
    color: #000000;
    line-height: 36px;
    margin-top: 18px;
    margin-left: 33px;
  }
  &_hint {
    font-size: 16px;
    font-weight: 400px;
    color: #666666;
    line-height: 36px;
    margin-top: 22px;
    margin-right: 33px;
    // outline: 1px solid red;
  }
  &_text {
    flex: 1;
    height: 180px;
    // outline: 1px solid red;
    margin-top: 20px;
    margin-left: 34px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }
  &_img {
    width: 230px;
    height: 180px;
    margin-top: 20px;
    margin-right: 44px;
    margin-bottom: 23px;
    // outline: 1px solid red;
    overflow: hidden;
  }
  &_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 25px 33px 30px 33px;
  }
  &_news {
    width: 45%;
    overflow: hidden;
    &_img {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    &_time {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      font-size: 14px;
      font-weight: bold;
      color: #3c7cd8;
      margin-top: 20px;
    }
    &_text {
      // width: 194px;
      width: 100%;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
}
</style>
